<template>
  <h2>子级组件</h2>
  <button @click="img = 'flex'">更新</button>
  <span>{{ img }}</span>
</template>
<script lang="ts">
import {
  defineComponent,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onUnmounted,
  onBeforeUnmount,
  ref,
} from "vue";
export default defineComponent({
  name: "child1",
  //   vue3 生命周期，组合函数API
  setup() {
    console.log("Vue3.x setup");

    let img = ref("simple");

    onBeforeMount(() => {
      console.log("Vue3.x onBeforeMount");
    });

    onMounted(() => {
      console.log("Vue3.x onMounted");
    });
    onBeforeUpdate(() => {
      console.log("Vue3.x onBeforeUpdate");
    });
    onUpdated(() => {
      console.log("Vue3.x onUpdated");
    });
    onUnmounted(() => {
      console.log("Vue3.x onUnmounted");
    });
    onBeforeUnmount(() => {
      console.log("Vue3.x onBeforeUnmount");
    });

    return {
      img,
    };
  },
});
</script>

<style>
</style>
